﻿@page "/timelines"
@inject IStringLocalizer<Timelines> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["SubTitle"]</h4>

<DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
    <div class="d-flex mb-3 align-items-center">
        <div class="text-nowrap me-1">@Localizer["BasicUsageP"]</div>
        <RadioList class="flex-fill" TValue="SelectedItem" OnSelectedChanged="@OnStateChanged" Items="@Items"></RadioList>
    </div>
    <Timeline Items="TimelineItems" IsReverse="@IsReverse"></Timeline>
</DemoBlock>

<DemoBlock Title="@Localizer["CutomNodeStyleTitle"]" Introduction="@Localizer["CutomNodeStyleIntro"]" Name="CutomNodeStyle">
    <Timeline Items="CustomerTimelineItems" />
</DemoBlock>

<DemoBlock Title="@Localizer["LeftTitle"]" Introduction="@Localizer["LeftIntro"]" Name="Left">
    <p>@((MarkupString)Localizer["LeftP"].Value)</p>
    <Timeline Items="AlternateTimelineItems" IsLeft="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["AlternateTitle"]" Introduction="@Localizer["AlternateIntro"]" Name="Alternate">
    <p>@((MarkupString)Localizer["AlternateP"].Value)</p>
    <Timeline Items="AlternateTimelineItems" IsAlternate="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["DispalyCustomComponentTitle"]" Introduction="@Localizer["DispalyCustomComponentIntro"]" Name="DispalyCustomComponent">
    <p>@((MarkupString)Localizer["DispalyCustomComponentP"].Value)</p>
    <Timeline Items="GetCustomerComponentTimelineItems()" />
</DemoBlock>

<AttributeTable Items="GetAttributes()" />

<AttributeTable Items="GetTimelineItemAttributes()" Title="@Localizer["AttributeTitle"]" />
